<template>
  <div>
    <h3>LifeCircle02</h3>
  </div>
</template>

<script>
export default {
  name: "LifeCircle02",
  data() {
    return {
      name: "",
      num: 0,
    };
  },
  methods: {
    plus() {
      this.num++;
    },
  },
  computed: {},
  components: {},
  beforeCreate() {
    console.log(this.name, "beforeCreate");
    console.log("num", this.num);
  },
  created() {
    console.log(this.name, "created");
    console.log("num", this.num);
    this.plus();
  },
  beforeMount() {
    console.log(this.name, "beforeMount");
    console.log("num", this.num);
    this.plus();
  },
  mounted() {
    console.log(this.name, "mounted");
    console.log("num", this.num);
    this.plus();
  },
  beforeUpdate() {
    console.log(this.name, "beforeUpdate");
    console.log("num", this.num);
    this.plus();
  },
  updated() {
    console.log(this.name, "updated");
    console.log("num", this.num);
    this.plus();
  },
  beforeDestroy() {
    console.log(this.name, "beforeDestroy");
    console.log("num", this.num);
    this.plus();
  },
  destroyed() {
    console.log(this.name, "destroyed");
    console.log("num", this.num);
    this.plus();
  },
};
</script>

<style scoped></style>
